<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<!-- <c-header>
			<view class="header" slot="header">
				<view class="title">消息中心</view> 
			</view>
		</c-header> -->
		<view v-if="isLogin" class="body">
			
			<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
			
			<template v-else>
				<template v-if="list.length>0">
					<view class="msg-type-list"> 
						<navigator :url="'/package_msg/msg-list/msg-list?type='+item.id" hover-class="none" class="item" v-for="(item,index) in list" :key="index">
							<view class="icon">
								<image v-if="item.id==0" src="@/static/images/sp_icon.png" mode="widthFix"></image>
								<image v-if="item.id==1" src="@/static/images/db_icon.png" mode="widthFix"></image>
								<image v-if="item.id==2" src="@/static/images/hk_icon.png" mode="widthFix"></image>
								<image v-if="item.id==3" src="@/static/images/zp_icon.png" mode="widthFix"></image>
								<image v-if="item.id==4" src="@/static/images/xx_icon.png" mode="widthFix"></image>
								<image v-if="item.id==5" src="@/static/images/yqsq_icon.png" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="left">
									<view class="ft">
										<view class="name">{{item.name}}</view> 
									</view>
									<view class="fb">{{item.count>0?'您有'+item.count+'条消息未读':'暂无最新消息'}}</view>
								</view>
								<view v-if="item.count>0" class="new-num">{{item.count}}</view>
							</view>
						</navigator>					 
					</view> 
				</template> 
			</template>
		</view> 
		
		<!-- <c-nav-index :switchTab="2"></c-nav-index> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				type: '-1',
				isIphoneX:getApp().globalData.isIphoneX,
				page:1,
				list:[],
				total:0,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				}
			}
		},
		onLoad() { 
			this.isLogin=this.$loginState('check');
			if(this.isLogin){  
				this.getMessageList()
			}			
		},
		onShow() {
			
		}, 
		methods: {
			// 获取消息
			async getMessageList(){ 
				let res=await this.$api.user_api.addMsgTypeList();  
				if(res.data.code==200){ 
					this.loadingState.default=false;
					this.list=res.data.data;					 
				}
			},  
		},
		computed:{
			list_update(){
				return this.$store.state.msg_state;
			}
		},
		watch:{
			list_update(newer,older){ 
				if(newer!=older){
					this.list=[]; 
					this.getMessageList();
				}
			} 
		}
	}
</script>

<style lang="less">
	.page{
		// background: #fff;
	} 
	.msg-type-list{
		// padding: 20rpx 0 0;
		background: #fff;
		margin-bottom: 20rpx;
		.item{
			display: flex;
			align-items: center;
			padding:0 0 0 20rpx;
			.icon{
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
				margin-right: 20rpx; 
				image{
					width: 100%;
				}
			}
			.content{
				display: flex;
				align-items: center;
				flex-grow: 2;
				padding:25rpx 20rpx 25rpx 0;
				border-bottom: 1rpx solid #eee; 
				.left{
					flex-grow: 2;
					.ft{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;
						.name{
							font-size: 30rpx;
							font-weight: bold;
						}
						.time{
							color:#999;
							font-size: 28rpx;
						}
					}
					.fb{
						font-size: 28rpx;
						color:#999;
					}
				}
				.new-num{
					flex-shrink: 0;
					min-width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background-color: #f00;
					border-radius: 50%;
					font-size: 26rpx;
					color:#fff;
				}
				
			}
		}
	}
</style>
